import React from 'react';
import { Map, Marker } from 'react-amap';
import { PageContainer } from '@ant-design/pro-layout';
import { Button, Space, Card, Select, Modal } from 'antd';
import { 
  getTrailerName,
  getTrailer
} from '@/services/trailer/api';
import { getLastPosition,
  getPathsByTrailerID, 
  returnGpsByPathID,
} from '@/services/path/api';
import { TrailerDescription } from './components/TrailerDescription';
import { MyMap } from './components/MyMap';

const { Option } = Select;

export default class TrailerPathPage extends React.Component {
  constructor() {
    super();
    this.state = {
      trailer_ids: [],
      trailer_value: undefined,
      path_value: undefined,
      guijijiankong_able: false,      // false代表那个按钮可以点击，true则代表对应按钮不能点击
      didianchaxun_able: false,
      guijihuifang_able: false,
      marker_visiable: false,
      path_visiable: false,
      guijijiankong_text: '轨迹监控',
      didianchaxun_text: '地点查询',
      guijihuifang_text: '轨迹回放',
      isModalVisible: false,
      path_gps_data: [],
      path_ids: [],
      position: {lon: 114.35738432483673, lat: 30.608313392810004},
      trailerObj: {},
      websocket_path_monitor_switch: false,
    };
  }

  handleSearch = async (value) => {
    const params = { trailer_ID: value };
    const options = { params };
    let ret = await getTrailerName(options);
    // console.log(ret);
    this.setState({ trailer_ids: ret.data });
  };

  handleChange = async (value) => {
    this.setState({ trailer_value: value });
    let ret = await getTrailer(value)
    this.setState({ trailerObj: ret.data[0] })
    this.setState({marker_visiable: false}) // 消除地点查询的marker标记
  };

  // 轨迹监控按钮回调函数
  guijiJiankong = async() => {
    // 更新trailerObj
    let ret = await getTrailer(this.state.trailer_value)
    this.setState({ trailerObj: ret.data[0] })
    // 轨迹监控
    if (this.state.guijijiankong_text === '轨迹监控') {
      this.setState({marker_visiable: false}) // 消除地点查询的marker标记
      this.setState({ didianchaxun_able: true });
      this.setState({ guijihuifang_able: true });
      this.setState({ guijijiankong_text: '停止监控' });
      // 开始监控传数据过来，开启socketio连接
      this.setState({ websocket_path_monitor_switch: true })
      console.log(this.state)
    }
    // 停止监控
    else {
      this.setState({ didianchaxun_able: false });
      this.setState({ guijihuifang_able: false });
      this.setState({ guijijiankong_text: '轨迹监控' });
      // 停止接受数据，关闭socketio连接
      this.setState({ websocket_path_monitor_switch: false })
      console.log(this.state)
    }
  };

  // 地点查询按钮回调函数
  didianChaxun = async () => {
    const ret = await getLastPosition(this.state.trailer_value);
    const gps_data = ret.data;
    this.setState({
      position: {
        lon: gps_data[0],
        lat: gps_data[1],
      },
      marker_visiable: true,
    })
    // 更新trailerObj
    let ret1 = await getTrailer(this.state.trailer_value)
    this.setState({ trailerObj: ret1.data[0] })
  }

  // 轨迹回放按钮回调函数
  guijiHuifang = async() => {
    // 更新trailerObj
    let ret = await getTrailer(this.state.trailer_value)
    this.setState({ trailerObj: ret.data[0] })
    // 轨迹回放
    if (this.state.guijihuifang_text === '轨迹回放') {
      this.setState({marker_visiable: false}) // 消除地点查询的marker标记
      this.setState({ isModalVisible: true });
      const path_ids_resp = await getPathsByTrailerID(this.state.trailer_value)
      this.setState({path_ids: path_ids_resp.data})
      console.log(this.state)
    }
    // 停止回放
    else {
      this.setState({ guijijiankong_able: false });
      this.setState({ didianchaxun_able: false });
      this.setState({ guijihuifang_text: '轨迹回放' });
      // 停止画画或者停止轨迹回放
      this.setState({path_visiable: false})
    }
  };

  handleOk = async () => {
    // 轨迹回放
    const gps_data_resp = await returnGpsByPathID(this.state.path_value);
    this.setState({ 
      guijijiankong_able: true,
      didianchaxun_able: true,
      guijihuifang_text: '停止回放',
      path_gps_data: gps_data_resp.data,
      path_visiable: true,
      isModalVisible: false
    });
  };

  handleCancel = () => {
    this.setState({ isModalVisible: false });
  };

  handleChange_path = (value) => {
    this.setState({ path_value: value });
    // const params = {trailer_ID:value};
  };

  render() {
    const options = this.state.trailer_ids.map((d) => <Option key={d}>{d}</Option>);
    const options_path = this.state.path_ids.map((d) => <Option key={d}>{d}</Option>);
    return (
      <PageContainer>
        {/* 轨迹选择对话框 */}
        <Modal
          title="轨迹选择"
          visible={this.state.isModalVisible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
          <Space size={20} direction="vertical">
            <Space>拖车号：{this.state.trailer_value}</Space>
            <Space>
              轨迹号：
              <Select style={{ width: 250 }} onChange={this.handleChange_path}>
                {options_path}
              </Select>
            </Space>
          </Space>
        </Modal>

        <Space size={20} direction="vertical">
          {/* Select输入框 + 3个按钮 */}
          <Card>
            <Space size={650}>
              <Space size={10}>
                拖车号：
                <Select
                  style={{ width: 350 }}
                  showSearch
                  notFoundContent={null}
                  onSearch={this.handleSearch}
                  onChange={this.handleChange}
                >
                  {options}
                </Select>
              </Space>
              <Space size={20}>
                <Button onClick={this.guijiJiankong} disabled={this.state.guijijiankong_able}>
                  {this.state.guijijiankong_text}
                </Button>
                <Button onClick={this.didianChaxun} disabled={this.state.didianchaxun_able}>
                  {this.state.didianchaxun_text}
                </Button>
                <Button onClick={this.guijiHuifang} disabled={this.state.guijihuifang_able}>
                  {this.state.guijihuifang_text}
                </Button>
              </Space>
            </Space>
          </Card>
          {/* 地图 + 拖车详情描述 */}
          <Card>
            <Space size={50}>
              <MyMap
                marker_visiable={this.state.marker_visiable}
                marker_position={this.state.position}
                http_line_path={this.state.path_gps_data}
                http_path_visiable={this.state.path_visiable}
                trailer_id={this.state.trailer_value}
                websocket_path_monitor_switch={this.state.websocket_path_monitor_switch}
              ></MyMap>
              <TrailerDescription trailerObj={this.state.trailerObj}></TrailerDescription>
            </Space>
          </Card>
        </Space>
      </PageContainer>
    );
  }
}
